<!--o2o服务需求详情页-->
<template>
	<view>
		<view class="bg"></view>
		<view class="ywjy">
			<view class="title">
				<view class="name">{{ serviceName }}</view>
				<view class="nav" @click="loadMap">
					<u-icon name="car" color="#2979ff" size="40"></u-icon>
					立即导航
				</view>
			</view>
			<u-gap style="margin-top:20upx;" height="2" bg-color="#eaeaea"></u-gap>
			<u-row gutter="16" class="ele">
				<view class="child textcontent">
					<view style="width: 50upx; display: inline-block"><u-icon name="map" color="#2979ff" size="40" @click="loadMap"></u-icon></view>
					{{ address }}
				</view>
			</u-row>
			<u-row gutter="16" class="ele">
				<u-col span="12" class="item">
					<view class="child">
						<view style="width: 50upx; display: inline-block"><u-icon name="clock" color="#2979ff" size="40"></u-icon></view>
						{{ orderTime }}
					</view>
				</u-col>
			</u-row>
			<u-row gutter="16" class="ele">
				<u-col span="12" class="item">
					<view class="child">
						<view style="width: 50upx;display: inline-block"><u-icon name="list-dot" color="#2979ff" size="40"></u-icon></view>
						{{ serviceDemad }}
					</view>
				</u-col>
			</u-row>
			<u-row gutter="16" class="ele">
				<u-col span="12" class="item">
					<view class="child">
						<view style="width: 50upx;display: inline-block"><u-icon name="account" color="#2979ff" size="40"></u-icon></view>
						{{ connectName }}
					</view>
				</u-col>
			</u-row>
			<u-row gutter="16" class="ele">
				<u-col span="12" class="item">
					<view class="child">
						<view style="width: 50upx;display: inline-block"><u-icon name="rmb" color="#2979ff" size="40"></u-icon></view>
						{{ price }}元
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="ywjy">
			<u-row gutter="16" class="ele">
				<u-col span="12"><view class="name">图片信息</view></u-col>
			</u-row>
			<view class="fgx"></view>
			<view class="imgs">
				<u-image v-if="himages != ''" @click="imgListPreview" class="item" width="200rpx" height="200rpx" v-for="(item,index) in himages" :key="index" :index="index" :src="item"></u-image>
				<u-row v-else gutter="16" class="ele">
					<view class="textcontent" style="padding:10upx;">{{ state || '无' }}</view>
				</u-row>
			</view>
		</view>
		<view class="ywjy">
			<u-row gutter="16" class="ele">
				<u-col span="12"><view class="name">备注</view></u-col>
			</u-row>
			<u-gap style="margin-top:20upx;" height="2" bg-color="#eaeaea"></u-gap>
			<u-row gutter="16" class="ele">
				<view class="textcontent" style="padding:10upx;">{{ state || '无' }}</view>
			</u-row>
		</view>
		<view class="addSite" v-if="status == 1">
			<view class="telphone" @click="go()">
				<u-icon name="phone" color="#2979ff" size="40"></u-icon>
				&nbsp;拨打电话
			</view>
			<view class="add" @tap="takeServiceOrder">接单</view>
		</view>
		<view class="addSite" v-else>
			<view class="telphone" @click="go()">
				<u-icon name="phone" color="#2979ff" size="40"></u-icon>
				&nbsp;拨打电话
			</view>
			<!-- <view  class="telphone-gray">
				<u-icon name="phone" color="#2979ff" size="40"></u-icon>
				&nbsp;拨打电话
			</view> -->
			<view class="add-gray">已被接单</view>
		</view>
		<view style="height: 80px;"></view>
		<u-top-tips ref="uTips" style="top:0"></u-top-tips>
	</view>
</template>

<script>
export default {
	data() {
		return {
			himages: [],
			price:'',
			id: '',
			connectTel: '',
			status: '',
			orderTime: '',
			address: '',
			serviceName: '',
			serviceDemad: '',
			state: '',
			connectName: '',
			lat: '',
			lon: ''
		};
	},
	methods: {
		imgListPreview() {
			uni.previewImage({
				indicator: 'number',
				loop: true,
				urls: this.himages
			});
		},
		loadMap() {
			if (this.lat == '-1' || this.lon == '-1') {
				this.$refs.uTips.show({
					title: '导航地址有误，请电话联系对方',
					type: 'warning',
					duration: '2300'
				});
			} else {
				window.location.href = 'http://apis.map.qq.com/uri/v1/marker?marker=coord:' + this.lat + ',' + this.lon + ';addr:' + this.address;
			}
		},
		loadData(serviceId) {
			this.$u.get('/front/business/info/' + serviceId).then(res => {
				if (res.code == 200) {
					if (res.data.images) {
						this.himages = res.data.images.split(',');
					}
					this.price = res.data.price;
					this.connectTel = res.data.connectTel;
					this.status = res.data.status;
					this.orderTime = res.data.createTime;
					this.address = res.data.address;
					this.serviceName = res.data.serviceName;
					this.serviceDemad = res.data.serviceDemad;
					this.state = res.data.state;
					this.connectName = res.data.connectName;
					this.lat = res.data.lat;
					this.lon = res.data.lon;
				} else {
					this.$refs.uTips.show({
						title: res.msg,
						type: 'warning',
						duration: '2300'
					});
				}
			});
		},
		go() {
			uni.makePhoneCall({
				// 手机号
				phoneNumber: this.connectTel,
				// 成功回调
				success: res => {
					console.log('调用成功!');
				},
				// 失败回调
				fail: res => {
					console.log('调用失败!');
				}
			});
		},
		takeServiceOrder() {
			this.$u.get('/front/business/takeServiceOrder/' + this.id).then(res => {
				if (res.code == 200) {
					this.status = 2;
				} else {
					this.$refs.uTips.show({
						title: res.msg,
						type: 'warning',
						duration: '2300'
					});
				}
			});
		}
	},
	onLoad(...options) {
		const id = this.$Router.$route.history.current.params.id;
		this.id = id;
		this.loadData(id);
	}
};
</script>

<style lang="scss" scoped>
.bg {
	position: fixed;
	top: 0;
	width: 100%;
	height: 900upx;
	background-image: linear-gradient(#fa8513, #fff);
}
.title {
	display: flex;
	.name {
		flex-grow: 2;
	}
	.nav {
		width: 180upx;
	}
}
.imgs {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	.item {
		margin-left: 2upx;
	}
}
.ywjy {
	font-size: 1.1em;
	padding: 10upx;
	position: relative;
	margin: 0 auto;
	margin-top: 20upx;
	z-index: 1;
	width: 95%;
	height: 100%;
	border-radius: 5px;
	background-color: #ffff;
	.textcontent {
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
	}
	.ele {
		margin-top: 15upx;
	}
	.name {
		font-weight: bold;
		font-size: 1.5em;
	}
	.item {
		margin-top: 10upx;
		.child {
			height: 50upx;
			line-height: 50upx;
		}
	}
}
.addSite {
	border-top: 1px solid #ebebeb;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1030;
	line-height: 100rpx;
	font-size: 30rpx;
	display: flex;
	.telphone {
		flex-grow: 2;
		text-align: center;
		background-color: #ffff;
	}
	.telphone-gray {
		flex-grow: 2;
		text-align: center;
		background-color: #cfd0c6;
	}
	.add {
		background-color: #fa8513;
		color: #ffffff;
		width: 300upx;
		text-align: center;
	}
	.add-gray {
		background-color: #cfd0c6;
		color: #ffffff;
		width: 300upx;
		text-align: center;
	}
}
</style>
